<template>
  <div>
    <div v-if="toUserInfo">
      <chat-window v-if="toUserInfo" :utalk="utalk" :to="toUserInfo" />
      <el-button type="danger" size="small" v-on:click="startChat(null)">取消聊天</el-button>
    </div>

    <div v-else>
      <div v-if="recentChats.length > 0">
        <el-row v-for="(item, index) in recentChats" :key="index">
          <el-col :span="4">
            <img :src="item.avatar" width="100" height="100">
          </el-col>
          <el-col :span="16">

            <p>{{ item.nickName }}</p>
            <p>{{ item.lastMsg?.msgBody ?? '' }}</p>
            <p>
              <el-tag>{{ $moment(item.lastMsg?.time ?? '').format('YYYY-MM-DD HH:mm:ss') }}</el-tag>
              <el-divider direction="vertical"></el-divider>
              <el-tag>未读：{{ item.unReadCount }}</el-tag>
            </p>
          </el-col>
          <el-col :span="4">
            <el-button type="primary" size="small" v-on:click="startChat(item)">开始聊天</el-button>
          </el-col>
        </el-row>
      </div>
      <div v-else>
        <div v-if="utalk.userInfo.userId==='999999'">
          我的身份是客服，等待用户联系
        </div>
        <div v-else>          
          <el-button type="primary" size="small" v-on:click="startChat({
            userId: '999999',
            nickName: '我的身份是客服',
            avatar: 'https://www.uutils.com/src/2023/09/13/73aabf65aefd4824ac8c7882d29b380e.png',
          })">联系客服</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import ChatWindow from './ChatWindow.vue'


export default {

  props: {
    utalk: Object,
  },

  components: {
    ChatWindow
  },
  data() {
    return {
      recentChats: [],
      toUserInfo: null
    }
  },
  mounted() {
    const _this = this;
    this.utalk.listenRecentChats(function (recentChats) {
      _this.recentChats = recentChats;
    });
  },

  computed: {},

  created() { },


  methods: {
    startChat(item) {
      this.toUserInfo = item;
    }

  },
  // 使用watch属性来监听list数组中元素的变化
  watch: {

  },
}

</script>